<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>mapState</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vuex@next"></script>
    </head>
    <body>

        <div id="first">
            <div>{{counter}}</div>
            <div>{{localCounter}}</div>
            <div>{{countPlusLocalState}}</div>
        </div>

        <script>
            const store = Vuex.createStore({
                state () {
                    return {
                        count: 100
                    }
                },
                mutations: {
                    increment (state) {
                        state.count++
                    }
                }
            });
       
            const app = Vue.createApp({
                data(){
                    return {
                        localCounter: 200 
                    }
                },
                computed: Vuex.mapState({
                    counter: state => state.count ,
                    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
                    countPlusLocalState (state) {
                        return state.count + this.localCounter
                    }
                })
            });

            app.use( store );

            app.mount( "#first" );
       </script>
        
    </body>
</html>